<template>
    <div>

        <!-- 用户信息区域 -->
        <div class="topBox">
            <div class="set">
                <img src="../../assets/img/me/set.svg" alt="设置" @click="setFun">
            </div>
            <div class="userBox f_content">
                <img src="../../assets/img/me/icon.jpg" alt="用户头像">
                <div>
                    <div>
                        请登录
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB切换 -->
        <div class="bottomBox">
            <ul class="tabList">
                <li 
                    v-for="(tab, index) in tabArr" 
                    :key="tab"
                    :class="{ 'on': index == eq }"
                    @click="tabFun(index)"
                >
                    {{ tab }}
                </li>
                <li 
                    class="line" 
                    :style="'transform: translate3d(' +  x + 'px, 0, 0);'"
                >
                </li>
            </ul>
            <ul class="listContent">
                <li
                    v-for="(tab, index) in tabArr" 
                    :key="tab"
                    v-if="eq == index"
                    :style="'height:' + cH +'px'"
                >
                    <img src="../../assets/img/me/nullTip.svg" alt="空提示">
                    <p>数据被海浪冲掉了~~</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tabArr: ['讨论','想看','在看','看过','影评','影人'],//tab列表
            eq: 0,//tab选中的下标
            x: 0,//X轴移动的距离
            cH: document.documentElement.clientHeight - 247
        }
    },
    methods: {

        //TAB切换效果
        tabFun (index) {
            this.eq = index
            this.x =  this.eq * (document.documentElement.clientWidth / 6)
        },

        //用户设置
        setFun () {
            console.log('用户设置');
        }
    }
} 
</script>

<style scoped lang="scss">
    .topBox {
        height: 150px;
        width: 100%;
        background: url('../../assets/img/me/meBg.png') 50% 50% no-repeat;
        background-size: cover;
        position: relative;
        .set {
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 25px;
                height: 25px;
            }
        }
        .userBox {
            height: 50px;
            width: 83%;
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
                flex: 44px 0 0;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 3px solid #fff;
            }
            div {
                height: 50px;
                flex: 1;
                padding-left: 10px;
                color: #fff;
                overflow: hidden;
                div {
                    height: 50px;
                    line-height: 50px;
                    float: left;
                }
            }
        }
    }
    .bottomBox {
        .tabList {
            overflow: hidden;
            border-bottom: 1px solid #ececec;
            font-size: 14px;
            li {
                float: left;
                width: calc(100% / 6);
                height: 45px;
                line-height: 45px;
                text-align: center;
                color: #999999;
                transition: all .3s ease-in-out; 
                &.on {
                  color: #494949;  
                }
                &.line {
                    height: 2px;
                    background-color: #494949;
                }
            }
        }
        .listContent {
            li {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #494949;
                img {
                    width: 50%;
                    margin-bottom: 15px;
                }
            }
        }
    }
</style>
